<template>
    <div class="template-item">
        <div class="image-bg">
            <img :src="ItemData.img_url" alt="" class="background-image">
            <span _ngcontent-rsc-c216="" class="project-type">{{ ItemData.category }}</span>
        </div>
        <div class="box">
            <div class="title">
                <span>{{ ItemData.title }}</span>
            </div>
            <div class="content" :title="ItemData.content">
                {{ ItemData.content }}
            </div>
            <!-- 模板选择 -->
            <div class="controls">
                <el-button type="primary" size="small" @click="selectTemplateHandler">选用</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, watch, ref } from 'vue';
import { defineEmits } from "vue";

// 定义组件接收的props
const props = defineProps({
    projectData: {
        type: Object
    }
});

//定义选用按钮功能事件
const emitNextStep = defineEmits(['selectTemplate']);

//设置默认值
let ItemData = ref({})
ItemData = props.projectData ? props.projectData : { id: 1, title: "DevOps全流程示例项目", content: "华为端到端（HE2E）DevOps实施框架，是结合了华为30年研发经验并集合了业界先进的实践所形成的一套可操作可落地的敏捷开发方法论。", img_url: require("@/assets/img/template-project-item1.png"), category: "科研项目类" }

//设置选用按钮功能
const selectTemplateHandler = () =>{
    emitNextStep('selectTemplate',2)
}


</script>

<style lang="scss" scoped>
.template-item {
    position: relative;
    width: 317px;
    height: 308px;
    /* 边框仅用于可视化组件边界，可根据需要移除 */
    border-radius: 4px;
    background-color: #ffffff;
    /* 背景颜色，可根据需要调整 */
    box-shadow: 0 1px 6px rgba(0, 0, 0, .08);

    .image-bg {
        width: 100%;
        /* 上半部分高度 */
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;


        .background-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            /* 保持图片比例，同时适应容器 */
        }

        .project-type {
            position: absolute;
            top: 21px;
            left: 20px;
            padding: 0 8px;
            background-image: linear-gradient(90deg, #3023ae 0%, #53a0fd 48%, #8b46cb 100%);
            font-size: 12px;
            color: #fff;
            line-height: 22px;
            border-radius: 8px 0;
        }
    }

    &:hover .box {
        height: 100%; // 当鼠标悬停时，增高到100%
        z-index: 2; // 确保在鼠标悬停时，.box 在 .image-bg 之上
        transition: height 0.3s ease; // 平滑过渡效果
    }

    .box {
        width: 100%;
        position: absolute; // 使用绝对定位，使其可以覆盖.image-bg
        bottom: 0; // 定位到底部
        left: 0; // 定位到左侧
        right: 0; // 定位到右侧
        height: 50%; // 默认高度为50%
        transition: height 0.3s ease; // 平滑过渡效果
        /* 下半部分高度 */
        padding: 10px;
        box-sizing: border-box;
        background-image: url('@/assets/img/static-content-bg.png');
        background-size: cover; // 背景图片完全填充背景
        background-position: center; // 可选，确保背景图片居中显示
        background-repeat: no-repeat; // 确保背景图片不重复

        /* 确保padding不会影响容器的高度 */

        .title {
            font-size: 16px;
            font-weight: 700;
            color: #000;
            cursor: pointer;
        }

        .content {
            display: -webkit-box;
            margin: 8px 0 0;
            line-height: 20px;
            font-size: 12px;
            color: #71757f;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            cursor: pointer;
        }

        .controls {
            // 默认隐藏按钮
            opacity: 0;
            // 默认将按钮位置设在底部外面
            transform: translateY(100%);
            transition: opacity 0.3s ease, transform 0.3s ease;
            // 确保按钮在底部且水平居中
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
            z-index: 3; // 确保按钮在最顶层
            flex: 1;
            
        }

        // 当鼠标悬停时，显示按钮并滑入
        &:hover .controls {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
}
</style>